<template>
  <div class="add-address">
    <project-nav-bar></project-nav-bar>
    <div class="address-main">
      <div class="main-items">
        <div
          class="add-item"
          v-for="(item, index) in placeholderArr"
          :key="index"
        >
          <!-- 注意   v-model="item.val"-->
          <van-field
            v-model="item.val"
            @click="itemClick(item)"
            :placeholder="item.name"
          />
        </div>
        <van-checkbox
          class="add-item add-item-check"
          v-model="checked"
          shape="square"
          >设为默认地址</van-checkbox
        >
      </div>
    </div>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
      @open="openClick"
      @click-overlay="closeClick"
    >
      <van-area
        @confirm="confirm"
        title="标题"
        :area-list="areaList"
        value="110101"
      />
    </van-popup>

    <add-tab-bar @addClick="addClick">
      <span slot="title">保存</span>
    </add-tab-bar>
  </div>
</template>

<script>
import areaList from "@/assets/arealist/areaList.js";
import { Toast } from "vant";
import ProjectNavBar from "./children/ProjectNavBar";
import AddTabBar from "./children/AddTabBar";
import { getSaveAction, getDetailAction } from "@/network/address";
export default {
  components: {
    ProjectNavBar,
    AddTabBar,
  },
  created() {
    this.getDetailActions();
  },
  watch: {
    "$route":function(to, from) {
      console.log(to, from, '哈哈哈2')
    }
  },
  data() {
    return {
      areaList,
      searchResult: [],
      checked: false,
      // placeholderArr: ["姓名", "手机号码", "省份, 城市, 区县", "详细地址"],
      placeholderArr: [
        {
          val: "",
          name: "姓名",
          id: 1,
          checked: false,
        },
        {
          val: "",
          name: "手机号码",
          id: 2,
          checked: false,
        },
        {
          val: "",
          name: "省份, 城市, 区县",
          id: 3,
          checked: false,
        },
        {
          val: "",
          name: "详细地址",
          id: 4,
          checked: false,
        },
      ],
      // placeholderArrs: [

      // ],
      show: false,
      currentIndex: "",
      id: '',
    };
  },
  methods: {
    // 发送post 请求
    addClick() {
      console.log(2);
      console.log(this.placeholderArr);
      const arr1 = [];

      this.placeholderArr.forEach((item) => {
        arr1.push(item.val);
      });
      console.log(arr1);
      const obj = {
        userName: arr1[0],
        telNumber: arr1[1],
        address: arr1[2],
        detailadress: arr1[3],
        // addressId: "", // 需要判断  新增不传, 修改传
        addressId: this.id ? this.id : '',
        checked: this.checked,
        openId: localStorage.getItem("openId"),
      };
      console.log(obj);
      getSaveAction(obj).then((res) => {
        console.log(res);
        this.$router.push({
          path: "/address",
        });
      });
    },
    getDetailActions() {
      const datas = {
        id: this.$route.params.id,
      };
      getDetailAction(datas).then((res) => {
        console.log(res, "哈哈哈");

        const arr = [];
        for (let i in res.data) {
          console.log(res.data[i]);
          arr.push(res.data[i]);
        }
        console.log(arr);

        this.placeholderArr.map((item, index) => {
          if (item.name == "姓名") {
            item.val = arr[1];
          } else if (item.name == "手机号码") {
            item.val = arr[2];
          } else if (item.name == "省份, 城市, 区县") {
            item.val = arr[3];
          } else if (item.name == "详细地址") {
            item.val = arr[4];
          } else {
            item.val = arr[index];
          }
        });
        this.checked = arr[5] == 1 ? true : "";
        this.id = arr[0]; // id值
      });
    },
    itemClick(item) {
      if (item.name == "省份, 城市, 区县") {
        this.show = true;
        console.log(item);
        let index = this.placeholderArr.findIndex(
          (items) => item.id == items.id
        );
        this.currentIndex = index;
      }
    },
    openClick() {},
    confirm(event) {
      console.log(1, event); // 存放选择地址数据
      const arr = []; // 手写存数据 绑定model
      event.forEach((item) => arr.push(item.name));
      console.log(arr);
      this.placeholderArr[this.currentIndex].val = arr.join(" ");
      this.show = false;
    },
    // 遮罩层点击
    closeClick() {
      console.log("hahh");
    },

    // onSave() {
    //   Toast('save');
    // },
    // onDelete() {
    //   Toast('delete');
    // },
    // onChangeDetail(val) {
    //   if (val) {
    //     this.searchResult = [
    //       {
    //         name: '黄龙万科中心',
    //         address: '杭州市西湖区',
    //       },
    //     ];
    //   } else {
    //     this.searchResult = [];
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
.address-main {
  margin: 10px 20px;
}
.main-items {
  margin-top: 49px;
  input {
  }
}
</style>